<template>
  <div class="login">
    <div class="login_left" v-show="show">
      <div class="system_name">
        <img src="@/assets/logo/logo.png" alt="" />
        <div class="name">{{ $t('login.systemName') }}</div>
      </div>
      <div class="center_animation">
        <Transition name="bounce" appear>
          <div class="svg_img">
            <img src="@/assets/images/login.svg" alt="" />
            <div class="wecome">{{ $t('login.weCome') }}</div>
            <div class="copyright">{{ $t('login.copyRight') }}</div>
          </div>
        </Transition>
      </div>
    </div>
    <div class="login_right">
      <div class="langSelect">
        <LangSelect></LangSelect>
      </div>
      <div class="loginBox">
        <Login :isShow="show" />
      </div>
    </div>
  </div>
</template>

<script>
import LangSelect from "@/components/LangSelect";
import Login from "./components/LoginForm.vue";
export default {
  components: {
    LangSelect,
    Login,
  },
  data() {
    return {
      systemName: process.env.VUE_APP_TITLE,
      show: true,
    };
  },
  methods: {
    isPC(width) {
      if (width < 1200) {
        this.show = false;
      } else {
        this.show = true;
      }
    },
  },
  mounted() {
    let that = this;
    let widthAAA = document.documentElement.clientWidth;
    this.isPC(widthAAA);
    window.addEventListener("resize", function () {
      let width = document.documentElement.clientWidth;
      that.isPC(width);
    });
  },
  beforeDestroy(){
    window.removeEventListener("resize",()=>{})
  }
};
</script>

<style lang="less" scoped>
.login {
  height: 100%;
  display: flex;
  justify-content: center;
  .login_left {
    width: 50%;
    background-color: #353e54;
    height: 100%;
    padding: 30px;
    .system_name {
      width: 100%;
      display: flex;
      img {
        height: 30px;
        width: 30px;
      }
      .name {
        color: #fff;
        letter-spacing: 3px;
        font-size: 20px;
        font-weight: bold;
        margin-left: 10px;
      }
    }
    .center_animation {
      height: calc(100% - 60px);
      display: flex;
      align-items: center;
      justify-content: center;
      .svg_img {
        color: #fff;
        img {
          height: 350px;
          width: 350px;
        }
        .wecome {
          margin-top: 20px;
          font-size: 30px;
          letter-spacing: 1.5px;
        }
        .copyright {
          margin-top: 10px;
          font-size: 14px;
        }
      }
    }
  }
  .login_right {
    flex: 1;
    height: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .langSelect {
      width: 100%;
      display: flex;
      flex-direction: row-reverse;
      padding-right: 10px;
    }
    .loginBox {
      height: calc(100% - 80px);
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
</style>